<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> 小张送水后台管理系统</title>
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">

    <!--Bootstrap固定框架-->
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
    <!--图标库-->
    <link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
    <!--核心样式-->
    <link rel="stylesheet" th:href="@{/css/style.css}">

</head>
<body>

<div id="viewport">

    <!-- Sidebar
    客户列表页面使用th:replace属性替换成主菜单的侧边栏，让代码能够复用
    th:replace="waterMainMenu::sidebar"
    waterMainMenu表示主菜单页面的文件名称
    sidebar表示主菜单页面的片段名称
    -->
    <div id="sidebar" th:replace="waterMainnenu::sidebar">
        <nav class="navbar navbar-default" th:replace="waterMainMenu::navbar">
        </nav>
    </div>

    <!-- Content -->
    <div id="content">
        <!--
th:replace="waterMainMenu::navbar"表示将nav标签里面所有的内容替换为主页面的navbar片段
        -->
        <div class="col-md-12" style="display: inline">
            <div  style="left: -1%;margin-top: 1%">
                <!--                        点击“添加”按钮跳转到“添加送水历史”页面-->
                <a class="btn btn-primary" href="/history/preSaveHis">添加信息</a>
                <a class="btn btn-danger" href="#" id="batchDelete">批量删除</a>
                <a class="btn btn-success" th:href="@{/hello}">回到首页</a>
                <a class="btn btn-success" href="javascript:history.back(-1)">返回上一页</a>
                <div style="float: right">
                    <form class="form-inline" method="post">
                        <div class="form-group">
                            <label for="searchName">定单号：</label>
                            <input type="text" class="form-control" th:value="${workerName}" th:name="workerName"
                                   id="searchName" placeholder="请输入定单号">
                        </div>
                        <button type="submit" class="btn btn-primary">查询</button>
                    </form>
                </div>
            </div>

        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12" style="margin-top: 15px">
                    <table class="table table-bordered table-hover" border="1px">
                        <thead>
                        <tr class="success" style="text-align: center">
                            <td>定单号</td>
                            <td>下单时间</td>
                            <td>结束时间</td>
                            <td>送水工</td>
                            <td>客户</td>
                            <td>送水数量</td>
                            <td>定单金额</td>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 渲染后客户列表
                        ${custList}是Controller渲染到前端列表的数据，是一个集合
                        cust是集合里面的一个对象
                        th:each遍历集合里面所有的对象
                        ${cust.custName}对象名.属性名来显示数据。但是程序运行的时候会调用属性对应的get方法
                        th:表示Thymeleaf模板对象
                        注意：后端渲染到前端的动态数据全部包裹在${}里面
                        -->
                        <tr th:each="order : ${pageInfo.list}" style="text-align: center">
                            <td th:text="${order.orderNumber}"></td>
                            <td th:text="${order.startTime_1}"></td>
                            <td th:text="${order.endTime_1}"></td>
                            <td th:text="${order.worker.workerName}"></td>
                            <td th:text="${order.customer.custName}"></td>
                            <td th:text="${order.sendWaterCount}"></td>
                            <td th:text="${order.amount}"></td>

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <!--显示分页信息部分代码-->
    <div class="modal-footer no-margin-top">
        <div class="col-md-6">
            <strong>
                当前第<span style="color: red"> [[${pageInfo.pageNum}]]</span>页
                共 <span style="color: red">[[${pageInfo.pages}]] </span> 页
                一共<span style="color: red"> [[${pageInfo.total}]]</span> 条记录
            </strong>
        </div>
        <ul class="pagination pull-right no-margin">

            <!--hasPreviousPage 是否有前一页-->
            <li th:if="${pageInfo.hasPreviousPage}">
                <a th:href="'/getListOrder?pageNum=1'">首页</a>
            </li>

            <li class="prev" th:if="${pageInfo.hasPreviousPage}">
                <!--prePage:前一页-->
                <a th:href="'/getListOrder?pageNum='+${pageInfo.prePage}">
                    <i class="ace-icon fa fa-angle-double-left"></i>
                    <span>&laquo;</span>
                </a>
            </li>

            <!--遍历条数-->
            <!--navigatepageNums：所有导航页号-->
            <li th:each="nav:${pageInfo.navigatepageNums}">
                <a th:href="'/getListOrder?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
                <span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
            </li>

            <!--hasNextPage：是否有下一页-->
            <li class="next" th:if="${pageInfo.hasNextPage}">
                <a th:href="'/getListOrder?pageNum='+${pageInfo.nextPage}">
                    <i class="ace-icon fa fa-angle-double-right"></i>
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>

            <li>
                <a th:href="'/getListOrder?pageNum='+${pageInfo.pages}">尾页</a>
            </li>
        </ul>
    </div>

</div>
<script src="/jquery.js"></script>"
<script>
    $(document).ready(function (){
        $("#n7").css("background","#FFF");
        $("#n7_1").css("color","#000");
        $("#n7_2").css("color","#000");
    })
</script>

</body>
</html>